<template>
    <view>
        <view class="item">
            <view>车牌号:</view>
            <view @click="carInputClick">{{ cartNo }}</view>
        </view>
        <view class="item">
            <view>卡号</view>
            <view><input type="text" v-model="id_number" placeholder="请输入卡号"></view>
        </view>
        <view class="item">
            <view>车主姓名</view>
            <view><input type="text" v-model="vihicle_name" placeholder="请输入车主姓名"></view>
        </view>
        <view class="item">
            <view>车主手机号码</view>
            <view><input type="text" v-model="mobile" placeholder="请输入手机号码"></view>
        </view>
        <view class="item">
            <view>所属车队</view>
            <view @click="show = true">{{ team_name == ''?'选择车队':team_name }}</view>
        </view>
        <view class="submit" @click="submit">确认</view>
        <keyboard-plate ref="plateNumber" :plateNum.sync='cartNo' @change="getPlateNum" isShow></keyboard-plate>
        <u-picker :show="show" :columns="columns" keyName="label" @confirm="select"></u-picker>

    </view>
</template>

<script>
import { userlist, vihicleadd } from "@/api/user.js"
export default {
    components: {},
    props: {},
    data() {
        return {
            cartNo: '请输入车牌号',
            show: false,
            user: '请绑定车主',
            userId: '',
            id: '',
            id_number:'',
            mobile:'',
            vihicle_name:'',
            team_name:'',
            team_id:'',
            columns: [],
            id:''

        };
    },
    watch: {},
    methods: {
        getPlateNum(e) {
            console.log('车牌号是：' + e)
        },
        // 打开车牌选择器
        carInputClick() {
            this.$refs.plateNumber.open();
        },
        submit() {
            if (this.cartNo == '请选择车牌') {
                uni.showToast({
                    title: '请输入车牌号',
                    icon: 'none',
                    mask: true
                })
                return false;
            }
            vihicleadd({
                number: this.cartNo,
                id_number:this.id_number,
                mobile:this.mobile,
                vihicle_name:this.vihicle_name,
                team_user_id:this.team_id,
                id:this.id
            }).then(res => {
                console.log(res)
                if (res.code == 1) {
                    uni.showToast({
                        title: '成功～',
                        icon: 'none',
                        mask: true
                    })
                    setTimeout(() => {
                        uni.navigateBack({ delta: 1 })
                    }, 2000)
                }
            })
        },
        getList() {
            userlist({
                page: 1,
                pagesize: 100,
            }).then(res => {
                console.log(res)
                let arr = []
                for (let i = 0; i < res.data.length; i++) {
                    arr.push({
                        label: res.data[i].username,
                        value: res.data[i].id
                    })
                }
                this.columns = [arr]
            })
        },
        select(e) {
            console.log(e)
            this.team_name = e.value[0].label
            this.team_id = e.value[0].value
            this.show = false
        }
    },
    onShow() {
        this.getList()
    },
    onLoad(option) {
        if (option.type == 'edit') {
            let info = JSON.parse(decodeURIComponent(option.info))
            console.log(info)
            this.cartNo = info.number
            this.id_number = info.id_number
            this.mobile = info.mobile
            this.vihicle_name = info.vihicle_name
            this.team_name = info.team_detail.nickname
            this.team_id = info.team_detail.id
            this.id = info.id
        }
        // this.id = option.id
    },
};
</script>
<style scoped lang='scss'>
.item {
    display: flex;
    width: 94%;
    height: 90rpx;
    border-bottom: 1px solid #efefef;
    margin: auto;
    line-height: 90rpx;

    view:nth-child(1) {
        width: 30%;
        font-size: 28rpx;
    }

    view:nth-child(2) {
        width: 70%;
        font-size: 28rpx;
        color: $uni-color-primary;
        input {
            width: 100%;
            height: 90rpx;
            border: none;
        }
    }
}

.submit {
    width: 94%;
    height: 90rpx;
    background-color: $uni-color-primary;
    border-radius: 50rpx;
    margin: auto;
    margin-top: 130rpx;
    text-align: center;
    line-height: 90rpx;
    color: #fff;
}
</style>